<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/common.css">
</head>

<body>
  <canvas id="canvas"></canvas>
  <!-- 顶点着色器 -->
  <script type="shader-source" id="vertexShader">
    void main(){
  	  //声明顶点位置
  	  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
  	  //声明要绘制的点的大小。
  	  gl_PointSize = 10.0;
  	}
  </script>
  <!-- 片元着色器 -->
  <script type="shader-source" id="fragmentShader">
    void main(){
      //设置像素颜色为红色
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); 
    }
  </script>
  <script src="../utils/webgl-helper.js"></script>
  <script>
    var canvas = document.querySelector('#canvas');
    var gl = canvas.getContext('webgl') || canvas.getContext("experimental-webgl");

    // 获取顶点着色器源码
    var vertexShaderSource = document.querySelector('#vertexShader').innerHTML;
    // 创建顶点着色器对象
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    // 将源码分配给顶点着色器对象
    gl.shaderSource(vertexShader, vertexShaderSource);
    // 编译顶点着色器程序
    gl.compileShader(vertexShader);

    // 获取片元着色器源码
    var fragmentShaderSource = document.querySelector('#fragmentShader').innerHTML;
    // 创建片元着色器程序
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    // 将源码分配给片元着色器对象
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    // 编译片元着色器
    gl.compileShader(fragmentShader);

    //创建着色器程序
    var program = gl.createProgram();
    //将顶点着色器挂载在着色器程序上。
    gl.attachShader(program, vertexShader);
    //将片元着色器挂载在着色器程序上。
    gl.attachShader(program, fragmentShader);
    //链接着色器程序
    gl.linkProgram(program);
    // 使用刚创建好的着色器程序。
    gl.useProgram(program);

    //设置清空画布颜色为黑色。
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    //用上一步设置的清空画布颜色清空画布。
    gl.clear(gl.COLOR_BUFFER_BIT);
    //绘制点。
    gl.drawArrays(gl.POINTS, 0, 1);
  </script>
</body>

</html>